<template>
    <div class="page">
        <div class="page_header" style="display: flex;">
            <div style="flex: 1 1 auto">
                <el-form ref="searchForm" :model="searchForm" style="display: flex;">
                    <el-form-item prop="goods_id">
                        <el-input v-model="searchForm.goods_id" placeholder="id"></el-input>
                    </el-form-item>
                    <el-form-item prop="goods_name">
                        <el-input v-model="searchForm.goods_name" placeholder="团购名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="nickname">
                        <el-input v-model="searchForm.nickname" placeholder="创建人"></el-input>
                    </el-form-item>
                    <el-form-item prop="openid">
                        <el-input v-model="searchForm.openid" placeholder="openid"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div style="flex:0 0 auto;">
                <el-button @click="$store.dispatch('tableReload')" type="primary">查询</el-button>
                <el-button @click="$store.dispatch('tableReset')">重置</el-button>
            </div>
        </div>
        <el-card class="page_body">
            <el-table
                height="10"
                class="page_body_table"
                :data="common.tableData"
                v-loading="common.loading"
                border
                stripe
                style="width: 100%">
                <el-table-column prop="goods_id" label="id" width="80"></el-table-column>
                <el-table-column prop="goods_name" label="团购名称"></el-table-column>
                <el-table-column prop="shop_name" label="店铺"></el-table-column>
                <el-table-column prop="price" label="价格" width="120"></el-table-column>
                <el-table-column prop="title_img" label="标题图片" width="150" align="center">
                    <template slot-scope="scope">
                        <el-image style="height: 100px"
                                  fit="contain"
                                  :src="scope.row.title_img"
                                  :preview-src-list="[scope.row.title_img]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_img" label="商品图片" width="150" align="center">
                    <template slot-scope="scope">
                        <el-image style="height: 100px" fit="contain" v-if="scope.row.goods_img && scope.row.goods_img.length"
                                  :src="scope.row.goods_img[0]" :preview-src-list="scope.row.goods_img">
                        </el-image>
                        <span v-if="scope.row.goods_img && scope.row.goods_img.length">共&nbsp;{{scope.row.goods_img.length}}&nbsp;张</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column prop="openid" label="openid" align="center"></el-table-column>
                <el-table-column prop="nickname" label="创建人" width="120" align="center"></el-table-column>
<!--                <el-table-column prop="is_delete" label="商品状态" width="80px;" align="center">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-tag v-if="scope.row.is_delete === 0" type="success">启用</el-tag>-->
<!--                        <el-tag v-else-if="scope.row.is_delete === 1" type="danger">禁用</el-tag>-->
<!--                        <el-tag v-else type="info">状态异常</el-tag>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="操作" width="120" align="center">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-button type="text" v-if="scope.row.is_delete === 1" @click="statusChange(scope.row)">启用-->
<!--                        </el-button>-->
<!--                        <el-button type="text" v-if="scope.row.is_delete === 0" @click="statusChange(scope.row)">停用-->
<!--                        </el-button>-->
<!--                    </template>-->
<!--                </el-table-column>-->
            </el-table>
            <pagination class="page_body_pagination"></pagination>
        </el-card>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import Pagination from "../Pagination";

    export default {
        components: {
            Pagination,
        },
        computed: {
            ...mapState(['common']),
        },
        data() {
            return {
                tableData: [],
                method: 'post',
                url: '/api/activity/goods/store',
                searchForm: {
                    goods_id:'',
                    goods_name:'',
                    nickname:'',
                    openid:'',
                }
            }
        },
        created() {
            this.$store.dispatch('pageInit', this);
        },
        methods: {
            statusChange(row) {
                let is_delete = 0;
                if (row.is_delete === 0) {
                    is_delete = 1;
                }
                this.post('/api/activity/goods/status', {goods_id: row.goods_id, is_delete: is_delete}).then(result => {
                    if (result.code === 0) {
                        this.$message.success(result.msg);
                        this.$store.dispatch('tableReload');
                    } else {
                        this.$message.error(result.msg);
                    }
                }).catch(e => {
                    console.log(e);
                    this.$message.error('商品详情加载异常');
                    this.loading = false;
                })
            },
        }
    }
</script>

<style>
    .table-detail p {
        margin-bottom: 0;
    }
</style>
